<template>
    <div class="platform">
        <my-tag title="个人中心" :showSortImg="false"></my-tag>
        <div class="platform-box">
            <el-form ref="formRef" :model="form" label-position="left" label-width="auto"
                class="demo-ruleForm platform-formList">
                <div class="form-left">
                    <el-form-item label="昵称" prop="nickName">{{ form.nickName }}</el-form-item>
                    <el-form-item label="授权手机号" prop="phonenumber">{{ form.phonenumber }}</el-form-item>
                    <el-form-item label="个人介绍" prop="remark">{{ form.remark || '暂无' }}</el-form-item>
                </div>
                <div class="form-right">
                    <el-form-item prop="nickName" label="头像">
                        <image-preview :src="userStoreAavtar.avatar" width="100px" height="100px"
                            :preview-src-list="[userStoreAavtar.avatar]"></image-preview>
                    </el-form-item>
                </div>
            </el-form>
        </div>
        <div class="platform-submit-btn">
            <el-button type="primary" @click="editInfo">修改</el-button>
        </div>
    </div>
</template>
<script setup>
import { getInfo } from '@/api/login'
import useUserStore from '@/store/modules/user'
const userStoreAavtar = useUserStore()
const router = useRouter();
const form = ref({});
(() => {
    getInfo().then((res) => {
        form.value = res.data.user
    })
})();
// 修改按钮
const editInfo = () => {
    router.push('/ordinaryUser/editOrdinaryUserInfo/' + form.value.userId)
}
</script>
<style lang="scss" scoped>
.header {
    display: flex;
    align-items: center;
    justify-content: center;

    .header-warn {
        font-family: NotoSansHans, NotoSansHans;
        font-weight: 400;
        font-size: 14px;
        color: #ACB3BD;
        line-height: 21px;
        text-align: right;
        font-style: normal;
        margin-left: 20px;
    }
}
</style>